import { ConnectorDataSource, DataSource } from "@/services";
import { useEffect, useRef, useState } from "react";
import styled from 'styled-components';
import { getTableDDL, alterTableComment, queryTableComment } from '@/services/database';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

import { Button, Descriptions, Radio, Input } from 'antd';
import type { RadioChangeEvent, DescriptionsProps } from 'antd';

const { TextArea } = Input;

export const TableInfor = (props: { dataSource: ConnectorDataSource, table: string }) => {

    const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);

    const [comment, setComment] = useState<string>('');

    const monacoEl = useRef(null);

    useEffect(() => {
        if (monacoEl) {
            setEditor((editor) => {
                if (editor) return editor;

                let editorObj = monaco.editor.create(monacoEl.current!, {
                    automaticLayout: true,
                    value: '',
                    language: 'sql',
                    readOnly: true,
                });
                return editorObj;
            });
        }

        return () => editor?.dispose();
    }, [monacoEl.current]);

    useEffect(() => {
        getTableDDL(props.dataSource, props.table).then((res) => {
            editor?.setValue(res);
        }).catch((err) => {
            console.log(err);
        });

        //获取表的注释
        queryTableComment(props.dataSource, props.table).then((comment) => {
            setComment(comment);
        });
    }, [props.dataSource, props.table, editor]);

    const items: DescriptionsProps['items'] = [
        {
            key: '2',
            label: '注释',
            span: 24,
            children: (
                <TextArea rows={4} value={comment} onChange={(event) => {
                    setComment(event.target.value);
                }} onBlur={(event) => {
                    alterTableComment(props.dataSource, props.table, event.target.value).then(() => {
                        //重新获取DDL
                        getTableDDL(props.dataSource, props.table).then((res) => {
                            editor?.setValue(res);
                        }).catch((err) => {
                            console.log(err);
                        });
                    });
                }}></TextArea>
            ),
        },
        {
            key: '1',
            label: '建表SQL',
            span: 24,
            children: (
                <SQLEditorContainer ref={monacoEl}>
                </SQLEditorContainer>
            ),
        }
    ];

    return (
        <Container>
            <Descriptions
                bordered
                size={'small'}
                items={items}
            />
        </Container>
    );
};

export default TableInfor;

const Container = styled.div`
    width: 100%;
    height: 100%;
`;

const SQLEditorContainer = styled.div`
    width: 100%;
    min-width: 300px;
    height:300px;
    flex: 1;
    border-bottom: 1px solid #d9d9d9;
    background-color: #FFFFFF;
`;
